<template>
  <el-card id="root">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
    >
      <!-- job表 -->
      <div>
        <h2>发布职位</h2>
      </div>
      <!-- name -->
      <el-form-item label="职位名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <!-- type -->
      <el-form-item label="职位类别" prop="type">
        <el-input v-model="ruleForm.type"></el-input>
      </el-form-item>
      <!-- address -->
      <el-form-item label="工作地址" prop="address">
        <el-input v-model="ruleForm.address"></el-input>
      </el-form-item>
      <!-- description -->
      <el-form-item label="职位描述" prop="description">
        <el-input
          type="textarea"
          :rows="15"
          placeholder="请输入内容"
          v-model="ruleForm.description"
        >
        </el-input>
      </el-form-item>
      <!-- salary -->
      <el-form-item label="薪资" prop="salary">
        <el-input v-model="ruleForm.salary"></el-input>
      </el-form-item>
      <!-- experience -->
      <el-form-item label="工作经验" prop="experience">
        <el-input v-model="ruleForm.experience"></el-input>
      </el-form-item>
      <!-- education -->
      <el-form-item label="学历要求" prop="education">
        <el-input v-model="ruleForm.education"></el-input>
      </el-form-item>
      <div>
        <div style="text-align: center">
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </div>
    </el-form>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        type: "",
        address: "",
        description: "职位描述：\n\n\n\n\n任职要求：\n",
        salary: "",
        experience: "",
        education: "",
      },
      rules: {
        name: [{ required: true, message: "请输入职位名称", trigger: "blur" }],
        type: [{ required: true, message: "请选择职位类别", trigger: "blur" }],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        description: [
          { required: true, message: "请输入职位描述", trigger: "change" },
        ],
        salary: [{ required: true, message: "请填写薪资", trigger: "blur" }],
        experience: [
          { required: true, message: "请输入工作经验要求", trigger: "blur" },
        ],
        education: [
          { required: true, message: "请输入学历要求", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submit() {
      this.ruleForm.username = sessionStorage.getItem("username");
      this.axios
        .post("/job/release",this.ruleForm )
        .then((resp) => {
          console.log(resp.data.message);
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
#root {
  width: 800px;
  margin: 0px auto;
  padding: 20px 50px
}
</style>